<template>
	<view class="menuList" :style="{ 'min-height' : height + 'px'}" v-if="list.length > 0">
		<view class=" fixed bottom whiteBg" id="menu">
			
			<slot></slot>
			
			<view class="flex av text-center bt">
				
				<view class="ptb8" @tap="tapMenu(item.url,curIndex)" :class="{ 'father' : item.isRound || item.count > 0 , 'main' : curIndex == index , 'grey' : curIndex != index }" v-for="( item , curIndex) in list" :key="curIndex">
					<view class="fz32 abs bottom text-center" v-if="item.isRound" :class="item.icon"></view>
					
					<view class="abs top pl40" v-if="item.count > 0">
						<view class="roundDot">
							{{item.count}}
						</view>
					</view>
					<view class="fz18 op0" :class="item.icon" v-if="item.isRound"></view>
					<view class="fz18" :class="item.icon" v-else></view>
					<view class="fz12 mt5">{{item.title}}</view>
				</view>
					
			</view>
			
		</view>
	</view>
	
</template>

<script>
	export default {
		name : 'menuList' ,
		props:{
			list : {
				type : Array ,
				default : function(e){
					return [
						{icon : 'iconfont icon-company' , title : "企业" , url : "/pages/home/home" , isRound : false } ,
						{icon : 'iconfont icon-staff' , title : "员工" , url : "/pages/staffList/staffList" , isRound : false } ,
						{icon : 'iconfont icon-staff' , title : "员工" , url : "/pages/userCenter/userCenter" , isRound : false } ,
					] ;
				}
			},
			index : {
				type : Number ,
				default : 0
			}
		},
		
		data() {
			return {
				height : 68 ,
				list : []
			};
		},
		
		created() {
			this.initList();
		},
		
		mounted() {
			this.$nextTick(()=>{
				this.computeHeight();
			})
		},
		
		methods:{
			
			initList(){
				var role = uni.getStorageSync("role");
				if ( role == 1 ) {
					this.list.push({icon : 'iconfont icon-company' , title : "企业" , url : "/pages/home/home" , isRound : false })
					this.list.push({icon : 'iconfont icon-staff' , title : "员工" , url : "/pages/staffList/staffList" , isRound : false })
				}
				if (role == 2) {
					this.list.push({icon : 'iconfont icon-company' , title : "企业" , url : "/pages/home/home" , isRound : false })
				}
			},
			
			computeHeight:function(e){
				const query = uni.createSelectorQuery().in(this);
				query.select('#menu').boundingClientRect(data => {
					if(data){
						this.height = data.height + 15;
					}
				}).exec();
			},
			
			tapMenu : function(url,index){
				if (this.curIndex == index) {
					this.$emit("tapMenu" , {index : index});
					return false ;
				}
				if(url){
					uni.redirectTo({
						url: url 
					});
					return ;
				}
				this.$emit("tapMenu" , {index : index});
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.menuList{
		.fixed{
			padding-bottom: constant(safe-area-inset-bottom); 
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 99;
		}
		.fz18{
			line-height: 40upx;
		}
		.fz12{
			line-height: 28upx;
		}
		.ptb8{
			padding-top: 14upx;
			padding-bottom: 14upx;
		}
		.father{
			.op0{
				opacity: 0;
			}
			.abs{
				bottom: 40upx;
				&:before{
					color: inherit;
					background-color: #fff;
					-webkit-border-radius: 100%;
					-moz-border-radius: 100%;
					border-radius: 100%;
					padding: 14upx;
					box-shadow: 0 -4px 10px 0px rgba(0, 0, 0, 0.07);
				}
			}
		}
		.roundDot{
			font-size: 12px;
			line-height: 36upx;
			text-align: center;
			width: 36upx;
			height: 36upx;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			border-radius: 100%;
			background-color:$red;
			color: #fff;
			display: inline-block;
			position: relative;
			&:after{
				content:"";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: inherit;
				-webkit-border-radius: 100%;
				-moz-border-radius: 100%;
				border-radius: 100%;
				animation: toBig 0.4s ;
				opacity: 0;
			}
		}
	}
	@keyframes toBig{
		from{
			opacity: 1;
			transform:scale(0.1);
		}
		to{
			opacity: 0.01;
			transform:scale(2);
		}
	}
	
</style>
